<!--注册页-->
<script setup>
import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

const status = ref(0);

const next =()=>{
  if(status.value > 3){
    ElMessage.success('注册成功!');
    router.push('/personal/bindEmail')
  }
  status.value = status.value+1;
}
</script>

<template>
  <div class="all">
    <!--第一步-->
    <div v-if="status===0" class="box">
      <div class="title">
        <p>
          <el-icon color="#0aa1ed" class="is-loading">
            <Loading />
          </el-icon>
        </p>
        <p style="border-top: 1px solid;color: #0aa1ed;">①</p>
        <p style="color: #0aa1ed;">填写手机号验证</p>
      </div>
      <div class="title">
        <p>
          <el-icon color="lightgrey"><QuestionFilled /></el-icon>
        </p>
        <p style="border-top: 1px solid;color: lightgrey">②</p>
        <p style="color: lightgrey">设置密码</p>
      </div>
      <div class="title">
        <p>
          <el-icon color="lightgrey"><QuestionFilled /></el-icon>
        </p>
        <p style="border-top: 1px solid;color: lightgrey">③</p>
        <p style="color: lightgrey">注册完成</p>
      </div>
      <el-form label-width="100px" class="content">
        <el-form-item label="手机号码">
          <el-input placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="图形验证码">
          <el-input placeholder="请输入验证码" style="float:left;width: 150px;"></el-input>
        </el-form-item>
        <el-form-item label="手机验证码：">
          <el-input placeholder="请输入验证码" style="float:left;width: 150px;"></el-input>
          <el-button type="danger" plain style="margin-left: 10px; float:right;width: 100px;">获取验证码</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%;" @click="next()">下一步</el-button>
        </el-form-item>
      </el-form>
      <router-link to="/login" class="login">已有账号？立即登录</router-link>
    </div>
    <!--第二步-->
    <div v-if="status===1" class="box">
      <div class="allTitle">
        <div class="title">
          <p>
            <el-icon color="#0aa1ed"><SuccessFilled /></el-icon>
          </p>
          <p style="border-top: 1px solid;color: #0aa1ed;">①</p>
          <p style="color: #0aa1ed;">填写手机号验证</p>
        </div>
        <div class="title">
          <p>
            <el-icon color="#0aa1ed" class="is-loading">
              <Loading />
            </el-icon>
          </p>
          <p style="border-top: 1px solid;color: #0aa1ed">②</p>
          <p style="color: #0aa1ed">设置密码</p>
        </div>
        <div class="title">
          <p>
            <el-icon color="lightgrey"><QuestionFilled /></el-icon>
          </p>
          <p style="border-top: 1px solid;color: lightgrey">③</p>
          <p style="color: lightgrey">注册完成</p>
        </div>
      </div>
      <el-form label-width="100px" class="content">
        <el-form-item label="账号密码">
          <el-input type="password" placeholder="6-16位字母/数字/符号，最少两位组成"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input type="password" placeholder="请再输入一次密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%;" @click="next()">提交</el-button>
        </el-form-item>
      </el-form>
      <router-link to="/login" class="login">已有账号？立即登录</router-link>
    </div>
    <!--第三步-->
    <div v-if="status===2" class="box">
      <div class="title">
        <p>
          <el-icon color="#0aa1ed"><SuccessFilled /></el-icon>
        </p>
        <p style="border-top: 1px solid;color: #0aa1ed;">①</p>
        <p style="color: #0aa1ed;">填写手机号验证</p>
      </div>
      <div class="title">
        <p>
          <el-icon color="#0aa1ed"><SuccessFilled /></el-icon>
        </p>
        <p style="border-top: 1px solid;color: #0aa1ed">②</p>
        <p style="color: #0aa1ed">设置密码</p>
      </div>
      <div class="title">
        <p>
          <el-icon color="#0aa1ed"><SuccessFilled /></el-icon>
        </p>
        <p style="border-top: 1px solid;color: #0aa1ed">③</p>
        <p style="color: #0aa1ed">注册完成</p>
      </div>
      <div>
        <p style="margin: 30px 0">
          <el-icon size="80"><CircleCheckFilled /></el-icon>
        </p>
        <p>
          注册成功！即将跳转登录页
        </p>
      </div>
      <router-link to="/login" class="login">已有账号？立即登录</router-link>
    </div>
  </div>
</template>

<style scoped>
p{
  text-align: center;
  margin: 0;
}
.box{
  height: 350px;
  width: 780px;
  background-color: #fff;
  margin: auto;
  position: absolute;
  border-radius: 10px;
  vertical-align: middle;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.login{
  color: #0aa1ed;
  text-decoration: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.title{
  width: 260px;
  display:inline-block;
  margin: 20px 0;
}
.all{
  background-image: url("/public/imgs/login-bg.jpg");
  background-repeat: no-repeat; /* 取消背景重复 */
  background-size: 100%;
  width: 100%;
  height: 400px;
}
.content{
  width: 400px;
  text-align: center;
  margin: auto;
}
</style>